<template>
	<div>
		<a-form :form="form" class="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
			<a-card class="card" title="基本信息" :bordered="false">
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="入驻时间">
							<p v-show="!isEdit">{{tableData.create_time}}</p>
							<a-input v-show="isEdit" v-model="form.create_time" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="失效日期">
							<p v-show="!isEdit">{{tableData.end_time}}</p>
							<a-input v-show="isEdit" v-model="form.end_time" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="姓名">
							<p v-show="!isEdit">{{tableData.faname}}</p>
							<a-input v-show="isEdit" v-model="form.faname" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="身份证号">
							<p v-show="!isEdit">{{tableData.idcard}}</p>
							<a-input v-show="isEdit" v-model="form.idcard" allowClear />
						</a-form-item>
					</a-col>

				</a-row>
				<a-row>
					<a-col :xl="{span: 6}">
						<a-form-item label="联系人">
							<p v-show="!isEdit">{{tableData.people}}</p>
							<a-input v-show="isEdit" allowClear aria-placeholder="请输入联系人" v-model="form.people" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="联系电话">
							<p v-show="!isEdit">{{tableData.contact_tel}}</p>
							<a-input v-show="isEdit" allowClear v-model="form.contact_tel" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="推广模式">
							<p v-show="!isEdit">{{tableData.type==1?"线上":"线下"}}</p>
							<el-select style="width: 250px;" v-show="isEdit" clearable v-model="form.type"
								placeholder="请选择">
								<el-option v-for="item in typeList" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="推广类型">
							<p v-show="!isEdit">{{tableData.user_type==1?"企业":"个人"}}</p>
							<el-select style="width: 250px;" v-show="isEdit" v-model="form.user_type" placeholder="请选择"
								clearable>
								<el-option v-for="item in user_typeList" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :xl="{span: 7}">
						<a-form-item label="结算类型">
							<p v-show="!isEdit">{{tableData.rate_type_name}}</p>
							<a-input v-show="isEdit" v-model="form.rate_type_name" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 5}">
						<a-form-item label="支付宝账号">
							<p v-show="!isEdit">{{tableData.alipayaccount==null?"无":tableData.alipayaccount}}</p>
							<a-input v-show="isEdit" v-model="form.alipayaccount" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="账户余额">
							<p v-show="!isEdit">{{tableData.balance==null?"0.00":tableData.balance}}</p>
							<a-input v-show="isEdit" v-model="form.balance" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="账户冻结金额">
							<p v-show="!isEdit">{{tableData.balance_end==null?"0.00":tableData.balance_end}}</p>
							<a-input v-show="isEdit" v-model="form.balance_end" allowClear />
						</a-form-item>
					</a-col>
					<a-col :lg="6">
						<a-form-item label="邀请码">
							<p v-show="!isEdit">{{tableData.code}}</p>
							<a-input v-show="isEdit" v-model="form.code" allowClear />
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="分成率">
							<p v-show="!isEdit">{{tableData.rate}}%</p>
							<a-input v-show="isEdit" v-model="form.rate" allowClear />
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="推广级别">
							<p v-show="!isEdit">{{tableData.level==2?"一级推广员":tableData.level==3?"二级推广员":'主推广员'}}</p>
							<el-select style="width: 250px;" v-show="isEdit" v-model="form.level" placeholder="请选择"
								clearable>
								<el-option v-for="item in options" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<!-- <a-form-item label="推广城市">
								<p v-show="!isEdit">{{tableData.shopcity}}</p>
								<a-input v-show="isEdit" v-model="form.shopcity" allowClear />
							</a-form-item> -->
						<a-form-item label="推广区域">
							<p v-show="!isEdit">{{ tableData.area_id }}</p>
							<el-cascader style="width: 250px;" v-show="isEdit" v-model="form.area_id" clearable
								filterable placeholder="请选择公司所在区域" :options="areaList" :props="optionProps"
								separator="-" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="邀请码">
							<p v-show="!isEdit">{{tableData.code}}</p>
							<a-input v-show="isEdit" v-model="form.code" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="邮箱地址">
							<p v-show="!isEdit">{{tableData.email==null?"无":tableData.email}}</p>
							<a-input v-show="isEdit" v-model="form.email" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="备注">
							<p v-show="!isEdit">{{tableData.remark==null?"无":tableData.remark}}</p>
							<a-input v-show="isEdit" v-model="form.remark" allowClear />
						</a-form-item>
					</a-col>
				</a-row>
			</a-card>
			<a-card v-if="tableData.user_type==1?true:false" class="card" title="公司信息" :bordered="false">
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="公司/机构名称">
							<p v-show="!isEdit">{{tableData.mechanism}}</p>
							<a-input v-show="isEdit" v-model="form.mechanism" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="公司/机构地址">
							<p v-show="!isEdit">{{tableData.address}}</p>
							<!-- <a-input v-show="isEdit" v-model="form.address" allowClear /> -->
							<el-cascader style="width: 250px;" v-show="isEdit" v-model="form.address" clearable
								filterable placeholder="请选择公司所在区域" :options="areaList" :props="optionProps"
								separator="-" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人姓名">
							<p v-show="!isEdit">{{tableData.faname}}</p>
							<a-input v-show="isEdit" v-model="form.faname" allowClear />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人身份证号">
							<p v-show="!isEdit">{{tableData.idcard}}</p>
							<a-input v-show="isEdit" v-model="form.idcard" allowClear />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row class="form-row">
					<!-- <a-col :xl="{span: 6}">
						<a-form-item label="营业执照照片">
							<preview-img v-show="!isEdit" :img-url="form.shopcard"></preview-img>
							<crop-upload v-show="isEdit" show-type="photo" :init-val="form.shopcard"
								wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('shopcard', val)" />
						</a-form-item>
					</a-col> -->
					<!-- <a-col :xl="{span: 6}">
						<a-form-item label="法人身份证正面照">
							<preview-img v-show="!isEdit" :img-url="form.faidcard"></preview-img>
							<crop-upload v-show="isEdit" show-type="photo" :init-val="form.faidcard"
								wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard', val)" />
						</a-form-item>
					</a-col> -->
					<!-- <a-col :xl="{span: 6}">
						<a-form-item label="法人身份证背面照">
							<preview-img v-show="!isEdit" :img-url="form.faidcard_back"></preview-img>
							<crop-upload v-show="isEdit" show-type="photo" :init-val="form.faidcard_back"
								wrapper-width="95px" wrapper-height="95px"
								@setVal="(val) => setUrl('faidcard_back', val)" />
						</a-form-item>
					</a-col> -->
					<a-col :xl="{span: 6}">
						<a-form-item label="统一社会信用代码">
							<p v-show="!isEdit">{{tableData.companyid}}</p>
							<a-input v-show="isEdit" v-model="form.companyid" allowClear />
						</a-form-item>
					</a-col>

				</a-row>

			</a-card>
		</a-form>
		<!-- <a-card title="变更记录" :bordered="false">
			<user-form :tabel-data="tabelData" />
		</a-card> -->
		<!-- <footer-tool-bar>
			<a-button type="primary" @click="returns" :loading="loading">返回</a-button>
			<a-button v-show="!isEdit&&perSale==1?true:false" style="margin-left: 8px;" type="primary" @click="validate" :loading="loading">
				修改信息</a-button>
			<a-button v-show="isEdit" style="margin-left: 8px;" type="primary" @click="submit" :loading="loading">保存 
			</a-button>
		</footer-tool-bar> -->
	</div>
</template>

<script>
	// import previewImg from '@/components/common/previewImg'
	// import cropUpload from '@/components/common/cropUpload'
	import {
		saleApplyDetail,
		saleUserEdit,

	} from '@/api/extension'
	import {
		getRegion
	} from '@/api/order'
	export default {
		name: 'AdvancedForm',
		components: {
			// previewImg,
			// cropUpload
		},
		i18n: require('./i18n'),
		data() {
			return {
				loading: false,
				tableData: {},
				form: {
					people: '',
					contact_tel: '',
					type: '',
					user_type: '',
					level: '',
					shopcity: '',
					code: '',
					rate: '',
					mechanism: '',
					address: '',
					faname: '',
					idcard: '',
					faidcard: '',
					faidcard_back: '',
					companyid: '',
					create_time: '',
					alipayaccount: '',
					email: '',
					end_time: '',
					balance: '',
					balance_end: '',
					remark: '',
					shopcard: '',
					company_area: '',
					rate_type:''
				},
				perSale: '',
				options: [{
					label: '一级推广员',
					values: '2'
				}, {
					label: '二级推广员',
					values: '3'
				}],
				typeList: [{
					label: '线上',
					values: '1'
				}, {
					label: '线下',
					values: '2'
				}],
				user_typeList: [{
					label: '企业',
					values: '1'
				}, {
					label: '个人',
					values: '2'
				}],
				isEdit: false,
				sale_user_id: 0,
				fileList: [],
				areaList: [],
				companyArea: '',
				optionProps: {
					value: 'name',
					label: 'name',
					expandTrigger: 'hover',
					children: 'sub'
				},
				regionList: [],
			}
		},
		computed: {},
		mounted() {
			this.getList()
			this.getProvice()
			this.perSale = localStorage.getItem('admin.saleId')
		},
		methods: {
			getAreaId(arr) {
				for (const p of this.areaList) {
					if (p.name === arr[0]) {
						for (const c of p.sub) {
							if (c.name === arr[1]) {
								return c.id
							}
						}
					}
				}
				return ''
			},
			getProvice() {
				getRegion().then(res => {
					this.regionList = res ? res[0].sub : []
					this.areaList = res ? [...res[0].sub] : []
					const index = this.areaList.findIndex(k => k.id === 7459)
					this.areaList.splice(index, 1)
				})
			},
			validate() {
				this.isEdit = true
			},
			returns() {
				this.isEdit = false
			},
			submit() {
				const params = this.form
				saleUserEdit(params).then(res => {
					console.log(res);
				})
				this.isEdit = false
			},
			getList() {
				saleApplyDetail().then(res => {
					this.tableData = res
					this.form = this.tableData
					this.sale_user_id = res.sale_user_id
					console.log(this.tableData);
					console.log(this.form);
				})
			},
			setUrl(key, value) {
				this.form[key] = value
			}
		}
	}
</script>

<style lang="less" scoped>
	.card {
		margin-bottom: 24px;
	}

	.form {
		.form-row {
			margin: 0 -8px
		}

		.ant-col-md-12,
		.ant-col-sm-24,
		.ant-col-lg-6,
		.ant-col-lg-8,
		.ant-col-lg-10,
		.ant-col-xl-8,
		.ant-col-xl-6 {
			padding: 0 8px
		}
	}
</style>
